<script setup>
  import tabbarData from '@/assets/data/tabbar.js'
  import { getAssetURL } from '@/utils/load_assets.js'
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'

  const currentIndex = ref(0)
  const router = useRouter()
  function itemClick(index, item) {
    currentIndex.value = index
    router.push(item.path)
  }
</script>

<template>
  <div class="tab-bar">
    <template v-for="(item, index) in tabbarData" :key="index">
      <div @click="itemClick(index, item)" class="tab-bar-item" :class="{ active: currentIndex === index }">
        <!-- 1.无法解析出正确的路径：将 item.image 当成普通字符串解析 -->
        <!-- <img :src="item.image" alt=""> -->
        <!-- 2.解决方法 -->
        <!-- 2.1 在 webpack 环境下，使用 require() 包裹路径信息即可 -->
        <!-- <img :src="require(item.image)" alt=""> -->
        <!-- 2.2 在 vite 环境下，需要封装一个函数，用于动态转换 -->
        <img v-if="currentIndex !== index" :src="getAssetURL(item.image)" alt="">
        <img v-else :src="getAssetURL(item.imageActive)" alt="">
        <span class="text">{{ item.text }}</span>
      </div>
    </template>
  </div>
</template>

<style lang="less" scoped>
  .tab-bar{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    display: flex;

    border-top: 1px solid #f3f3f3;

    .tab-bar-item {
      flex: 1;
      // 设置文字居中
      display: flex;
      justify-content: center;
      align-items: center;
      // 设置子元素排列方向为上下布局
      flex-direction: column;
      font-weight: 700;

      &.active {
        color: var(--primary-color);
      }

      img {
        width: 32px;
      }
  
      .text {
        font-size: 12px;
      }
    }
  }
</style>